 <template>
    <div>
        <el-row>
            <!--检索-->
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-input v-if="false" v-model="search.pageNo"></el-input>
                <el-input v-if="false" v-model="search.pageSize"></el-input>
                <el-col :span="4">
                    <el-input v-model="clientName" placeholder="请输入订单用户"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="orderNo" placeholder="请输入订单编号"></el-input>
                </el-col>

                <el-col :span="12"
                    ><div>
                        <el-button type="primary" icon="el-icon-search" @click="searchBtn">搜索</el-button>
                        <!-- <el-button type="info" icon="el-icon-loading" @click="emptyBtn">刷新</el-button> -->
                    </div>
                </el-col></el-form
            >

            <!--功能列表-->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="#" sortable> </el-table-column>
                <el-table-column prop="clientName" label="订单用户"> </el-table-column>
                <el-table-column prop="carOfName" label="订单车辆" > </el-table-column>
                <el-table-column width="175px" label="开始时间" >
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.startTime | dateFilter("yyyy-mm-dd hh:mm:ss")  }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="175px" label="结束时间" >
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.endTime | dateFilter("yyyy-mm-dd hh:mm:ss")  }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="brrowShopName" label="租出门店"> </el-table-column>
                <el-table-column prop="returnShopName" label="归还门店"> </el-table-column>
                <el-table-column prop="totalPrice" label="总金额"> </el-table-column>
                <el-table-column prop="preparidAmount" label="预付金额"> </el-table-column>
                <el-table-column prop="state" :formatter="getStateName" label="订单状态"> </el-table-column>
                <el-table-column prop="isgetcarathome" label="是否送车上门"> </el-table-column>
                <el-table-column prop="getcarlocation" label="送车上门地址"> </el-table-column>
                <el-table-column prop="isreturncarathome" label="是否上门还车"> </el-table-column>
                <el-table-column prop="returncarlocation" label="归还车辆地址"> </el-table-column>
                <el-table-column width="175px" label="创建时间">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.addtime | dateFilter("yyyy-mm-dd hh:mm:ss")  }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="200px" prop="orderNo" label="订单编号"> </el-table-column>
                <el-table-column label="操作" width="200px"  fixed="right">
                    <template slot-scope="scope">
                        <el-button size="small" @click="deleteInfo(scope.$index, scope.row)" icon="el-icon-delete" type="danger">删除</el-button>
                        <el-button size="small" @click="updateRole(scope.$index, scope.row)" icon="el-icon-edit" type="success">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页功能-->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pageNo"
                :page-sizes="[1, 5, 10, 20, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
            </el-pagination>

            <!--修改 Form -->
            <el-dialog title="订单管理" :visible.sync="editRoleState">
                <el-form :model="form">
                    <el-form-item label="订单用户" :label-width="formLabelWidth">
                        <el-input v-model="form.clientName"  auto-complete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="状态" :label-width="formLabelWidth">
                        <el-radio v-model="form.state" :label="1">输入</el-radio>
                        <el-radio v-model="form.state" :label="2">提交</el-radio>
                        <el-radio v-model="form.state" :label="3">预约</el-radio>
                        <el-radio v-model="form.state" :label="4">使用中</el-radio>
                        <el-radio v-model="form.state" :label="5">取消</el-radio>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editRoleState = false">取 消</el-button>
                    <el-button type="primary" @click="saveRole">确 定</el-button>
                </div>
            </el-dialog>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            page: {},
            form: {},
            search: { pageNo: 1, pageSize: 5 },
            formLabelWidth: '80px',
            editRoleState: false,
            dialogTableVisible: false,
            clientName:'',
            orderNo:'',
        };
    },
    created: function () {
        this.load();
    },
    methods: {
        //初始化数据
        load() {
            var _this = this;
            //页面初始化时，加载的方法
            //console.log(this.orderNo)
            this.$http.post('/api/mbs/order/queryAllByParam?pageNo='+this.search.pageNo+'&pageSize='+this.search.pageSize, {
                    
                        clientName:this.clientName,
                        orderNo: this.orderNo
                    
                })
                .then((response) => { 
                    console.log(response.data);
                    _this.tableData = response.data.data.list;
                    _this.page = response.data.data;
                    _this.total = response.data.data.total;
                });
        },
        //每页显示数量发生变化
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.search.pageSize = val;
            this.load();
        },
        //第几页发生变化
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.search.pageNo = val;
            this.load();
        },
        //查询
        searchBtn() {
            console.log(`当前页`);
            this.load();
        },
        emptyBtn() {
            this.search = {};
            this.search.pageNo = 1;
            this.search.pageSize = 5;
            this.load();
        },
        getStateName(row, column, cellValue) {
         var tmpType = "";
                     if (cellValue == 1) {
                         tmpType = "输入";
                     } else if (cellValue == 2) {
                         tmpType = "提交";
                     } else if (cellValue == 3) {
                         tmpType = "预约";
                     } else if (cellValue == 4){
                         tmpType = "使用中";
                     } else if (cellValue == 5){
                         tmpType = "交还";
                     }else {
                         tmpType = "取消";
                     }
                     return tmpType;
        },

        updateRole: function (index, row) {
            console.log(row);
            this.form=JSON.parse(JSON.stringify(row));
            // this.form = row;
            this.editRoleState = true;
        },
        saveRole() {
            var _this = this;
                this.$http.put('/api/mbs/order/update',this.form)
                    .then(function (response) {
                        //正确请求时，回调函数
                        console.log(response);
                        if(response.data.code==2000){
                          //关闭弹出框
                          _this.editRoleState = false;
                           //提示更新成功
                                _this.$message({
                                    //message: '恭喜你，这是一条成功消息',
                                    message: response.data.message,
                                    type: 'success' 
                                });
                                //重新加载数据
                                _this.load();
                        }else{
                           _this.$message.error(response.data.message);
                        }
                        
                    })
                    .catch(function (error) {
                        _this.$message.error('错了哦，这是一条错误消息');
                        _this.editRoleState = false;

                        _this.load();
                        //失败处理
                        console.log(error);
                    });
        },
        deleteInfo: function (index, row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    var _this = this;
                    this.$http
                        .delete('/api/mbs/order/deleteById?id=' + row.id)
                        .then(function (response) {
                            console.log(response);
                            if (response.status == 200) {
                                //重新加载数据
                                _this.load();
                                //提示成功
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                            _this.$message.error('你错了。。。');
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        }
    },filters: {
                    //时间格式处理
                    dateFilter: function (data, format = "") {
                        var dt = new Date(data);
                        var y = dt.getFullYear();
                        var m = (dt.getMonth()+1).toString().padStart(2,"0");
                        var d = dt.getDate().toString().padStart(2,"0");
                        var h = dt.getHours().toString().padStart(2,"0");
                        var mm = dt.getMinutes().toString().padStart(2,"0");
                        var s = dt.getSeconds().toString().padStart(2,"0");
                        if (format.toLocaleLowerCase() === "yyyy-mm-dd" ||
                            format.toLocaleLowerCase() === "") {
                            return `${y}-${m}-${d}`;
                        } else if (format.toLocaleLowerCase() === "yyyy/mm/dd") {
                            return `${y}/${m}/${d}`;
                        } else if (format.toLocaleLowerCase() === "yyyy-mm-dd hh:mm:ss") {
                            return `${y}-${m}-${d} ${h}:${mm}:${s}`;
                        } else if (format.toLocaleLowerCase() === "yyyy/mm/dd hh:mm:ss") {
                            return `${y}/${m}/${d} ${h}:${mm}:${s}`;
                        } else {
                            return `输入的时间格式有误`;
                        }
                    },
                },
};
</script>
<style>
</style>